<template>
  <div>
    <div>
      <el-button class="btn" @click="drawPolygon()" style="margin-bottom: 5px">绘制多边形</el-button>
      <el-button class="btn" @click="drawCircle()" style="margin-bottom: 5px">绘制圆形</el-button>
      <el-button class="btn" @click="save()" style="margin-bottom: 5px">保存</el-button>
      <el-button class="btn" @click="del()" style="margin-bottom: 5px">删除</el-button>
    </div>
    <div id="container" style="width: 1500px; height: 800px"></div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { addcoordinate } from "@/api/fence/fenceinfo";
export default {
  data() {
    return {
      mouseTool: null,
      value: {},
      fencdVo1: {
        id: null,
      },
      palce: null,
    };
  },
  mounted() {
    // debugger
    let fencd = JSON.parse(this.$route.query.fencd);
    // let fencd = this.$route.query.fencd;
    // fencd = JSON.parse(fencd)
    // console.log(fencd.id)
    this.fencdVo1 = fencd;
    // console.log(this.fencdVo1.id)
    // console.log(this.fencdVo1.fenceCoordinate)
    this.value = this.fencdVo1.fenceCoordinate;
  },
  methods: {
    save() {
      debugger;
      let fencdVo = {};
      // console.log(this.value);
      fencdVo.id = this.fencdVo1.id;
      fencdVo.path = JSON.stringify(this.value);
      // this.fenceVo.path = JSON.stringify(this.value);
      addcoordinate(fencdVo).then((resp) => {
        this.$modal.msgSuccess("添加成功");
        this.$router.push("/fence/fence");
      });
    },
    /**
     * 删除绘制完成的围栏
     */
    del() {
      // this.mouseTool.forEach(item => { item.close(); });
      this.palce.setMap(null);
    },
    drawPolygon() {
      this.mouseTool.polygon({
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: "#1791fc",
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      });
    },
    drawRectangle() {
      this.mouseTool.rectangle({
        strokeColor: "red",
        strokeOpacity: 0.5,
        strokeWeight: 6,
        fillColor: "blue",
        fillOpacity: 0.5,
        // strokeStyle还支持 solid
        strokeStyle: "solid",
        // strokeDasharray: [30,10],
      });
    },
    drawCircle() {
      this.mouseTool.circle({
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: "#1791fc",
        fillOpacity: 0.4,
        strokeStyle: "solid",
        // 线样式还支持 'dashed'
        // strokeDasharray: [30,10],
      });
    },
    drawPolyline() {
      this.mouseTool.polygon({
        strokeColor: "#FF33FF",
        strokeOpacity: 1,
        strokeWeight: 6,
        strokeOpacity: 0.2,
        fillColor: "#1791fc",
        fillOpacity: 0.4,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      });
    },
  },
  created() {
    AMapLoader.reset();
    AMapLoader.load({
      key: "b2ca35369d2df3113722d0427a84e56f", // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0",
      plugins: [
        "AMap.Scale",
        "AMap.HawkEye",
        "AMap.ToolBar",
        "AMap.ControlBar",
        "AMap.MouseTool",
      ],
    }).then((AMap) => {
      const map = new AMap.Map("container", {
        viewMode: "3D", // 默认使用 2D 模式
        zoom: 11, //初始化地图层级
        center: [116.397428, 39.90923], //初始化地图中心点
      });
      var scale = new AMap.Scale({
        visible: true,
      });
      var toolBar = new AMap.ToolBar({
        visible: true,
        position: {
          top: "110px",
          right: "40px",
        },
      });
      var controlBar = new AMap.ControlBar({
        visible: true,
        position: {
          top: "10px",
          right: "10px",
        },
      });
      var overView = new AMap.HawkEye({
        visible: true,
      });
      map.addControl(scale);
      map.addControl(toolBar);
      map.addControl(controlBar);
      map.addControl(overView);
      this.mouseTool = new AMap.MouseTool(map);

      // this.value = prace
      let prace = this;
      this.mouseTool.on("draw", function (event) {
        // event.obj 为绘制出来的覆盖物对象
        console.log(event.obj.getPath());
        console.log("覆盖物对象绘制完成");
        prace.value = event.obj.getPath();
      });

      let polygon = this;
      var palce = new AMap.Polygon({
        map: map, // 将围栏添加到地图上
        path: JSON.parse(this.value), // 设置围栏的坐标点数组
        strokeColor: "#000000", // 设置围栏的边框颜色FF33FF
        strokeWeight: 3, // 设置围栏的边框宽度
        fillColor: "#000000", // 设置围栏的填充颜色#FF99FF
        fillOpacity: 0.35, // 设置围栏的填充透明度
      });
      polygon.palce = palce;
    });
    // this.mouseTool = new AMap.MouseTool(map);
    // this.polygon = this;
    // console.log(this.value)
    // if (this.fencdVo1.fenceCoordinate != null) {

    // }
  },
};
</script>

<style>
html,
body,
#container {
  width: 100%;
  height: 100%;
}
</style>
